<template>
  <div class="inputLine">
    <div v-width="150" class="type-select">
      <Select v-model="select[0]" :datas="level1" @change="intSelect()"></Select>
    </div>
    <div v-width="150" class="type-select">
      <Select v-model="select[1]" :datas="level2" v-if="level2.length"></Select>
    </div>
    <div v-width="150" class="type-select">
      <Select v-model="select[2]" :datas="level3" v-if="level3.length"></Select>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  props: {
    value: [Array]
  },
  data() {
    return {
      select: [],
      types: ['美食,江浙菜,上海菜', '美食,江浙菜,淮扬菜', '美食,江浙菜,浙江菜', '美食,江浙菜,南京菜', '美食,江浙菜,苏帮菜', '美食,江浙菜,杭帮菜', '美食,江浙菜,宁波菜', '美食,江浙菜,无锡菜', '美食,江浙菜,舟山菜', '美食,江浙菜,衢州菜', '美食,江浙菜,绍兴菜', '美食,江浙菜,温州菜', '美食,江浙菜,苏北土菜', '美食,粤菜,潮汕菜', '美食,粤菜,茶餐厅', '美食,粤菜,客家菜', '美食,粤菜,湛江菜', '美食,川菜,自贡盐帮菜', '美食,川菜,江湖菜', '美食,川菜,酸菜鱼', '美食,川菜,香锅', '美食,川菜,川味小吃', '美食,湘菜', '美食,东北菜', '美食,徽菜', '美食,闽菜', '美食,鲁菜', '美食,台湾菜', '美食,西北菜', '美食,东南亚菜,泰国菜', '美食,东南亚菜,越南菜', '美食,东南亚菜,印度菜', '美食,东南亚菜,星马菜', '美食,东南亚菜,其它东南亚菜', '美食,西餐,法国菜', '美食,西餐,意大利菜', '美食,西餐,俄罗斯菜', '美食,西餐,牛排', '美食,西餐,比萨', '美食,西餐,巴西菜', '美食,西餐,中东菜', '美食,西餐,西式正餐', '美食,西餐,西式简餐', '美食,西餐,西班牙菜', '美食,西餐,无国界料理', '美食,西餐,美国菜', '美食,西餐,葡国菜', '美食,西餐,地中海菜', '美食,西餐,拉美烧烤', '美食,西餐,英国菜', '美食,西餐,德国菜', '美食,西餐,墨西哥菜', '美食,西餐,其它西餐', '美食,日韩菜,日本菜', '美食,日韩菜,韩国菜', '美食,日韩菜,其它日韩菜', '美食,火锅', '美食,清真菜', '美食,小吃快餐', '美食,海鲜', '美食,烧烤', '美食,自助餐', '美食,面包甜点', '美食,茶餐厅', '美食,咖啡厅', '美食,其它美食,北京家常菜', '美食,其它美食,官府菜', '美食,其它美食,云贵菜', '美食,其它美食,湖北菜', '美食,其它美食,山西菜', '美食,其它美食,豫菜', '美食,其它美食,天津菜', '美食,其它美食,新疆菜', '美食,其它美食,农家菜', '美食,其它美食,创意菜', '美食,其它美食,素菜', '美食,其它美食,烤鸭', '美食,其它美食,江西菜', '美食,其它美食,蒙古菜', '美食,其它美食,广西菜', '美食,其它美食,冀菜', '美食,其它美食,陕西菜', '美食,其它美食,青海菜', '美食,其它美食,西藏菜', '美食,其它美食,酒楼', '美食,其它美食,家常菜', '美食,其它美食,私家菜', '美食,其它美食,民族菜', '美食,其它美食,冷饮店', '美食,其它美食,其它中餐厅', '基础设施,交通设施,交通服务相关', '基础设施,交通设施,公交车站', '基础设施,交通设施,地铁站', '基础设施,交通设施,港口码头', '基础设施,交通设施,火车站', '基础设施,交通设施,轻轨站', '基础设施,交通设施,过境口岸', '基础设施,交通设施,长途汽车站', '基础设施,交通设施,飞机场', '基础设施,交通设施,公交线路', '基础设施,交通设施,地铁线路', '基础设施,交通设施,其它交通设施', '基础设施,公共设施,公共厕所', '基础设施,公共设施,公用电话', '基础设施,公共设施,紧急避难场所', '基础设施,公共设施,其它公共设施', '基础设施,道路附属,收费站', '基础设施,道路附属,服务区', '基础设施,道路附属,其它道路附属', '基础设施,其它基础设施', '医疗保健,专科医院,齿科', '医疗保健,专科医院,整形', '医疗保健,专科医院,眼科', '医疗保健,专科医院,耳鼻喉', '医疗保健,专科医院,胸科', '医疗保健,专科医院,骨科', '医疗保健,专科医院,肿瘤', '医疗保健,专科医院,脑科', '医疗保健,专科医院,妇产科', '医疗保健,专科医院,儿科', '医疗保健,专科医院,传染病医院', '医疗保健,专科医院,精神病医院', '医疗保健,专科医院,其它专科医院', '医疗保健,综合医院', '医疗保健,诊所', '医疗保健,急救中心', '医疗保健,药房药店', '医疗保健,疾病预防', '医疗保健,其它医疗保健', '生活服务,家政,月嫂保姆', '生活服务,家政,保洁钟点工', '生活服务,家政,开锁', '生活服务,家政,送水', '生活服务,家政,家电维修', '生活服务,家政,管道疏通打孔', '生活服务,家政,搬家', '生活服务,家政,其它家政', '生活服务,宠物服务,宠物商店', '生活服务,宠物服务,宠物市场', '生活服务,宠物服务,宠物医院', '生活服务,宠物服务,其它宠物服务', '生活服务,旅行社', '生活服务,摄影冲印', '生活服务,洗衣店', '生活服务,票务代售,飞机票代售', '生活服务,票务代售,火车票代售', '生活服务,票务代售,汽车票代售', '生活服务,票务代售,公交及IC卡', '生活服务,票务代售,景点售票', '生活服务,票务代售,其它票务代售', '生活服务,邮局速递,邮局', '生活服务,邮局速递,速递', '生活服务,通讯服务,中国电信营业厅', '生活服务,通讯服务,中国网通营业厅', '生活服务,通讯服务,中国移动营业厅', '生活服务,通讯服务,中国联通营业厅', '生活服务,通讯服务,中国铁通营业厅', '生活服务,通讯服务,其它通讯服务', '生活服务,彩票,彩票彩券销售点', '生活服务,彩票,马会投注站', '生活服务,报刊亭', '生活服务,自来水营业厅', '生活服务,电力营业厅', '生活服务,教练', '生活服务,生活服务场所', '生活服务,信息咨询中心', '生活服务,招聘求职', '生活服务,中介机构', '生活服务,事务所', '生活服务,丧葬', '生活服务,废品收购站', '生活服务,福利院养老院', '生活服务,测字风水', '生活服务,家装', '生活服务,其它生活服务', '休闲娱乐,洗浴推拿足疗', '休闲娱乐,KTV', '休闲娱乐,酒吧', '休闲娱乐,咖啡厅', '休闲娱乐,茶馆', '休闲娱乐,电影院', '休闲娱乐,棋牌游戏', '休闲娱乐,夜总会', '休闲娱乐,剧场音乐厅', '休闲娱乐,度假疗养', '休闲娱乐,户外活动', '休闲娱乐,网吧', '休闲娱乐,迪厅', '休闲娱乐,演出票务', '休闲娱乐,其它娱乐休闲', '购物,综合商场', '购物,便利店', '购物,超市', '购物,花鸟鱼虫', '购物,家具家居建材', '购物,体育户外', '购物,服饰鞋包', '购物,图书音像', '购物,眼镜店', '购物,母婴儿童', '购物,珠宝饰品', '购物,化妆品', '购物,食品烟酒', '购物,数码家电', '购物,农贸市场', '购物,小商品市场', '购物,旧货市场', '购物,商业步行街', '购物,礼品', '购物,摄影器材', '购物,钟表店', '购物,拍卖典当行', '购物,古玩字画', '购物,自行车专卖', '购物,文化用品', '购物,药店', '购物,品牌折扣店', '购物,自动售货机', '购物,其它购物', '运动健身,健身中心', '运动健身,游泳馆', '运动健身,瑜伽', '运动健身,羽毛球馆', '运动健身,乒乓球馆', '运动健身,篮球场', '运动健身,足球场', '运动健身,壁球场', '运动健身,马场', '运动健身,高尔夫场', '运动健身,保龄球馆', '运动健身,溜冰', '运动健身,跆拳道', '运动健身,海滨浴场', '运动健身,网球场', '运动健身,橄榄球', '运动健身,台球馆', '运动健身,滑雪', '运动健身,舞蹈', '运动健身,攀岩馆', '运动健身,射箭馆', '运动健身,综合体育场馆', '运动健身,其它运动健身', '汽车,加油站', '汽车,停车场', '汽车,4S店', '汽车,汽车维修', '汽车,驾校', '汽车,汽车租赁', '汽车,汽车配件销售', '汽车,汽车保险', '汽车,摩托车', '汽车,汽车养护', '汽车,洗车场', '汽车,汽车俱乐部', '汽车,汽车救援', '汽车,二手车交易市场', '汽车,车辆管理机构', '汽车,其它汽车', '酒店宾馆,星级酒店', '酒店宾馆,经济型酒店', '酒店宾馆,公寓式酒店', '酒店宾馆,度假村', '酒店宾馆,农家院', '酒店宾馆,青年旅社', '酒店宾馆,酒店宾馆', '酒店宾馆,旅馆招待所', '酒店宾馆,其它酒店宾馆', '旅游景点,公园', '旅游景点,其它旅游景点', '旅游景点,风景名胜', '旅游景点,植物园', '旅游景点,动物园', '旅游景点,水族馆', '旅游景点,城市广场', '旅游景点,世界遗产', '旅游景点,国家级景点', '旅游景点,省级景点', '旅游景点,纪念馆', '旅游景点,寺庙道观', '旅游景点,教堂', '旅游景点,海滩', '文化场馆,博物馆', '文化场馆,图书馆', '文化场馆,美术馆', '文化场馆,展览馆', '文化场馆,科技馆', '文化场馆,天文馆', '文化场馆,档案馆', '文化场馆,文化宫', '文化场馆,会展中心', '文化场馆,其它文化场馆', '教育学校,小学', '教育学校,幼儿园', '教育学校,其它教育学校', '教育学校,培训', '教育学校,大学', '教育学校,中学', '教育学校,职业技术学校', '教育学校,成人教育', '银行金融,银行', '银行金融,自动提款机', '银行金融,保险公司', '银行金融,证券公司', '银行金融,财务公司', '银行金融,其它银行金融', '地名地址,交通地名', '地名地址,地名地址信息', '地名地址,道路名', '地名地址,自然地名', '地名地址,行政地名', '地名地址,门牌信息', '地名地址,其它地名地址', '房产小区,住宅区', '房产小区,产业园区', '房产小区,商务楼宇', '房产小区,其它房产小区', '丽人,美发', '丽人,美容', '丽人,SPA', '丽人,瘦身纤体', '丽人,美甲', '丽人,写真', '丽人,其它', '结婚,婚纱摄影', '结婚,婚宴', '结婚,婚戒首饰', '结婚,婚纱礼服', '结婚,婚庆公司', '结婚,彩妆造型', '结婚,司仪主持', '结婚,婚礼跟拍', '结婚,婚车租赁', '结婚,婚礼小商品', '结婚,婚房装修', '结婚,其它', '亲子,亲子摄影', '亲子,亲子游乐', '亲子,亲子购物', '亲子,孕产护理', '公司企业,农林牧渔基地', '公司企业,企业/工厂', '公司企业,其它公司企业', '机构团体,公检法机构', '机构团体,外国机构', '机构团体,工商税务机构', '机构团体,政府机关', '机构团体,民主党派', '机构团体,社会团体', '机构团体,传媒机构', '机构团体,文艺团体', '机构团体,科研机构', '机构团体,其它机构团体', '其它']
    };
  },
  watch: {
    select: { // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function (value, oldvalue) {
        this.$emit('input', [value.join(',')]);
      }
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    level1() {
      return this.intData();
    },
    level2() {
      let key = this.select[0] || '';
      return this.intData(key);
    },
    level3() {
      let key = this.select[1] || '';
      return this.intData(key, 1);
    }
  },
  mounted() {
    let value = [];
    if (this.value.length > 0) {
      value = this.value[0].split(',');
    }
    this.select = value;
  },
  methods: {
    /**
     * 选择处理
     * @return {[type]} [description]
     */
    intSelect() {
      let k1 = this.select[0];
      if (this.select) {
        this.select = [k1];
      }
    },
    /**
     * 数据处理
     * @param  {Boolean} key [description]
     * @param  {Number}  i   [description]
     * @return {[type]}      [description]
     */
    intData(key = false, i = 0) {
      let array = this.types.map(function (string) {
        let value = string.split(',');
        if (key) {
          if (value[i] == key) {
            if (value[i + 1]) {
              return value[i + 1];
            }
          }
        } else {
          // key全等false解决不存在二三级时隐藏数据
          if (key === false && value[i]) {
            return value[i];
          }
        }
      });
      if (array.length > 0) {
        return [...new Set(array)].filter(function (s) {
          return s && s.trim();
        });
      } else {
        return [];
      }
    }
  }
};

</script>
<style scoped="true">
.type-select {
  display: inline-block;
  padding-right: 10px;
}

</style>
